import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { gridDefaultProps } from './defaultProps';
import type { GridOptions } from './type';
import GridColumn from './GridColumn';
import GridRow from './GridRow';
import numberToWord from '../_util/numberToWord';

export interface GridProps extends GridOptions, HTMLAttributes<HTMLDivElement> {}

interface GridInterface extends FC<GridProps> {
  Column: typeof GridColumn;
  Row: typeof GridRow;
}

const Grid: GridInterface = (props) => {
  const {
    className,
    column,
    equal,
    relaxed,
    celled,
    padded,
    textAlign,
    verticalAlign,
    centered,
    container,
    stackable,
    reversed,
    only,
    children,
    forwardedRef,
    ...gridProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        only,
        { only },
        numberToWord(column),
        { column, equal, width: equal, centered, container, stackable },
        relaxed,
        { relaxed },
        celled,
        { celled },
        textAlign,
        { aligned: textAlign === 'justified' ? false : textAlign },
        verticalAlign,
        { aligned: verticalAlign },
        reversed,
        { reversed },
        padded,
        { padded },
        'grid',
        className,
      ),
      ...gridProps,
    },
    children,
  );
};

Grid.displayName = 'Grid';
Grid.defaultProps = gridDefaultProps;

Grid.Column = GridColumn;
Grid.Row = GridRow;

export default Grid;
